import React, { memo, useState } from "react";
import type { FC, ReactNode } from "react";
import { MusicFooterWrapper } from "./style";
// 子组件
import SongmenuPage from "./c-cpns/songmenu-page";
import AllbumPage from "./c-cpns/allbum-page";
import ArtistPage from "./c-cpns/artist-page";
import MvPage from "./c-cpns/mv-page";
import CloudstoragePage from "./c-cpns/cloudstorage-page";
import classNames from "classnames";
import { useAppSelector } from "@/store";
import { shallowEqual } from "react-redux";
import ListeningPage from "./c-cpns/listening-page";

interface IProps {
  children?: ReactNode;
}

const MusicFooterTabs: FC<IProps> = () => {
  const footerTabs = [
    {
      text: "全部歌单",
      element: <SongmenuPage />
    },
    {
      text: "专辑",
      element: <AllbumPage />
    },
    {
      text: "歌手",
      element: <ArtistPage />
    },
    {
      text: "MV",
      element: <MvPage />
    },
    {
      text: "云盘",
      element: <CloudstoragePage />
    },
    {
      text: "听歌排行榜",
      element: <ListeningPage />
    }
  ]

  const [currIndex, setCurrIndex] = useState(0)
  // 控制isprops显示隐藏
  const [isShow, setIsShow] = useState(0)
  const { loginMode } = useAppSelector((state) => ({
    loginMode: state.login.loginMode
  }), shallowEqual)

  // 切换tab的方法
  const handleCLick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
    setCurrIndex(index)
    if (loginMode === "UserName" && currIndex !== 0) {
      setIsShow(1)
      setTimeout(() => {
        if (isShow) {
          setIsShow(0)
        }
      }, 1500)
    }
  }

  return <MusicFooterWrapper>
    <div className="footer-tab">
      <div className="left-tabs"> {
        footerTabs.map((item, index) => (
          <div className={classNames("footer-item", { tabActive: index === currIndex })} onClick={(e) => handleCLick(e, index)} key={item.text}>{item.text}</div>
        ))
      }</div>
      <div className="footer-item right">+ 新建歌单</div>
    </div>
    {loginMode && loginMode === "UserName" ? footerTabs[0].element : footerTabs[currIndex].element}
    <div className="prop-box" style={{ opacity: isShow }}>登录后才能进行操作(●'◡'●)</div>
  </MusicFooterWrapper>;
};

export default memo(MusicFooterTabs);